<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>M3U8商业加速解析播放</title>
    <meta name="referrer" content="never">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- IE内核 强制使用最新的引擎渲染网页 -->
    <meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 ,maximum-scale=1.0, user-scalable=no">
    <meta name="x5-fullscreen" content="true"> <!-- 手机H5兼容模式 -->
    <meta name="x5-page-mode" content="app"> <!-- X5  全屏处理 -->
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application"> <!-- UC 全屏应用模式 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!--  苹果全屏应用模式 -->
    <script src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/hls.js/1.1.5/hls.js"></script>
    <script src="//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/dplayer/1.25.1/DPlayer.min.js"></script>
</head>
<style>
    :root {
        --plyr-color-main: #00b2ff;
    }
    body,
    html {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        background-color: black;
    }
    #dplayer {
        width: 100%;
        height: 100%;
    }
    .plyr--video {
        height: 100%;
    }
</style>
<body>
    <div id="dplayer"></div>
    <script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    var urltext = getUrlParam('url');
    window.onload = () => {
        new DPlayer({
            container: document.getElementById('dplayer'),
            autoplay: true,
            video: {
                url: urltext,
                type: 'hls',
            },
            pluginOptions: {
                hls: {},
            },
        });
    }
    </script>
</body>